    <template>
    <div class="marketing-play">
        <div class="function-pack">
            <div class="item-application">
                <div class="title">拉新引流</div>
                <div class="pack-center flex-row-wrap">
                    <div class="pack-item flex-center" @click="jumpPage('/inviteCode')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036796%402x.png" />
                        <div class="center">
                            <p class="name">邀请码<span class="try" style="display: none">试用</span></p>
                            <div class="desc"><p title="">体验权益免费赠送</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>
                    <div class="pack-item flex-center" @click="jumpPage('/inviteFriendSee')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036798%402x.png" />
                        <div class="center">
                            <p class="name">请好友看<span class="try" style="display: none">试用</span></p>
                            <div class="desc"><p title="">付费用户传播好课</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>
                    <!-- 
                        <router-link to="/inviteCode">
                            <div class="pack-item flex-center">
                                <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036796%402x.png" />
                                <div class="center">
                                    <p class="name">邀请码<span class="try" style="display: none">试用</span></p>
                                    <div class="desc"><p title="">体验权益免费赠送</p></div>
                                </div>
                                <div class="imitation-button obtain">进入</div>
                            </div>
                        </router-link>		
                    
                        <router-link to="/inviteFriendSee">
                            <div class="pack-item flex-center">
                                <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036798%402x.png" />
                                <div class="center">
                                    <p class="name">请好友看<span class="try" style="display: none">试用</span></p>
                                    <div class="desc"><p title="">付费用户传播好课</p></div>
                                </div>
                                <div class="imitation-button obtain">进入</div>
                            </div>
                        </router-link>
                     -->
                    
                </div>
            </div>
			
            <div class="item-application">
                <div class="title">付费转化</div>
				
                <div class="pack-center flex-row-wrap">
                    <div class="pack-item flex-center" @click="jumpPage('/coupon')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036799%402x.png" />
                        <div class="center">
                            <p class="name">优惠券<span class="try" style="display: none">试用</span></p>
                            <div class="desc"><p title="">领券购买，抵扣费用</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>
                    <div class="pack-item flex-center" @click="jumpPage('/limitDiscount')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036804%402x.png" />
                        <div class="center">
                            <p class="name">限时折扣</p>
                            <div class="desc"><p title="">限时限量，打折促销</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>
                    <div class="pack-item flex-center" @click="jumpPage('/teamwork')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036796%402x.png" />
                        <div class="center">
                            <p class="name">拼团<span class="try" style="display: none">试用</span></p>
                            <div class="desc"><p title="">体验权益免费赠送</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>
                    <div class="pack-item flex-center" @click="jumpPage('/seckill')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036803%402x.png" />
                        <div class="center">
                            <p class="name">秒杀</p>
                            <div class="desc"><p title="">限时特卖，引流涨粉</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>
					
                    <!-- <router-link to="/coupon">
                        <div class="pack-item flex-center">
                            <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036799%402x.png" />
                            <div class="center">
                                <p class="name">优惠券<span class="try" style="display: none">试用</span></p>
                                <div class="desc"><p title="">领券购买，抵扣费用</p></div>
                            </div>
                            <div class="imitation-button obtain">进入</div>
                        </div>
                    </router-link>
										
					<router-link to="/limitDiscount">
					    <div class="pack-item flex-center">
					        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036804%402x.png" />
					        <div class="center">
					            <p class="name">限时折扣
									
								</p>
					            <div class="desc"><p title="">限时限量，打折促销</p></div>
					        </div>
					        <div class="imitation-button obtain">进入</div>
					    </div>
					</router-link>

                    <router-link to="/teamwork">
                        <div class="pack-item flex-center">
                            <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036796%402x.png" />
                            <div class="center">
                                <p class="name">拼团<span class="try" style="display: none">试用</span></p>
                                <div class="desc"><p title="">体验权益免费赠送</p></div>
                            </div>
                            <div class="imitation-button obtain">进入</div>
                        </div>
                    </router-link>
					
					<router-link to="/seckill">
					    <div class="pack-item flex-center">
					        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036803%402x.png" />
					        <div class="center">
					            <p class="name">秒杀
									
								</p>
					            <div class="desc"><p title="">限时特卖，引流涨粉</p></div>
					        </div>
					        <div class="imitation-button obtain">进入</div>
					    </div>
					</router-link>	 -->				
				</div>	               
            </div>			
            <div class="item-application">
                <div class="title">促进复购</div>
                <div class="pack-center flex-row-wrap">
                    <div class="pack-item flex-center" @click="jumpPage('/exchangeCode')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036805%402x.png" />
                        <div class="center">
                            <p class="name">兑换码
                            
                            </p>
                            <div class="desc"><p title="">凭码兑换权益礼包</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>
                    <div class="pack-item flex-center" @click="jumpPage('/goodsRecommend')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036806%402x.png" />
                        <div class="center">
                            <p class="name">商品推荐</p>
                            <div class="desc"><p title="">提升曝光率，增加销量</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>
                    <div class="pack-item flex-center" @click="jumpPage('/advertisePop')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036807%402x.png" />
                        <div class="center">
                            <p class="name">弹窗广告</p>
                            <div class="desc"><p title="">强曝光工具，高效传播</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>
                    <div class="pack-item flex-center" @click="jumpPage('/payGifts')">
                        <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036798%402x.png" />
                        <div class="center">
                            <p class="name">支付有礼<span class="try" style="display: none">试用</span></p>
                            <div class="desc"><p title="">付费用户传播好课</p></div>
                        </div>
                        <div class="imitation-button obtain">进入</div>
                    </div>


                    <!-- <router-link to="/exchangeCode">
                        <div class="pack-item flex-center">
                            <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036805%402x.png" />
                            <div class="center">
                                <p class="name">兑换码
								
								</p>
                                <div class="desc"><p title="">凭码兑换权益礼包</p></div>
                            </div>
                            <div class="imitation-button obtain">进入</div>
                        </div>
                    </router-link>
					
                    <router-link to="/goodsRecommend">
                        <div class="pack-item flex-center">
                            <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036806%402x.png" />
                            <div class="center">
                                <p class="name">商品推荐</p>
                                <div class="desc"><p title="">提升曝光率，增加销量</p></div>
                            </div>
                            <div class="imitation-button obtain">进入</div>
                        </div>
                    </router-link>
					
                    <router-link to="/advertisePop">
                        <div class="pack-item flex-center">
                            <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036807%402x.png" />
                            <div class="center">
                                <p class="name">弹窗广告</p>
                                <div class="desc"><p title="">强曝光工具，高效传播</p></div>
                            </div>
                            <div class="imitation-button obtain">进入</div>
                        </div>
                    </router-link>
                    <router-link to="/payGifts">
                        <div class="pack-item flex-center">
                            <img src="https://xiaoetong-1252524126.cos.ap-shanghai.myqcloud.com/FuncCenterNew/Group%2036798%402x.png" />
                            <div class="center">
                                <p class="name">支付有礼<span class="try" style="display: none">试用</span></p>
                                <div class="desc"><p title="">付费用户传播好课</p></div>
                            </div>
                            <div class="imitation-button obtain">进入</div>
                        </div>
                    </router-link> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
	methods:{
        jumpPage(path){
            this.$router.push(`${path}`)            
        }
	}
};
</script>

<style scoped>
@import '~@/components/common/css/common.css';

.marketing-play {
    padding: 20px;
}
.function-pack {
    height: 100%;
}
.function-pack .item-application {
    padding-bottom: 24px;
}
.function-pack .item-application .title {
    font-size: 16px;
    color: #333333;
    font-weight: 600;
    padding-bottom: 16px;
}
.flex-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.function-pack .item-application .pack-center .pack-item {
    margin-right: 16px;
    cursor: pointer;
    width: 254px;
    padding-bottom: 24px;
    background-color: #fafafa;
    padding: 16px 0;
    margin-bottom: 16px;
    border-radius: 4px;
}
@media screen and (min-width: 1710px) and (max-width: 1980px) {
    .pack-item {
        width: calc((100% - 64px) / 4);
    }
}
@media screen and (max-width: 1710px) {
    .pack-item {
        width: calc((100% - 32px) / 3);
    }
}
.flex-center {
    display: flex;
    align-items: center;
}
.function-pack .item-application .pack-center .pack-item img {
    width: 48px;
    height: 48px;
    margin-left: 16px;
}
.function-pack .item-application .pack-center .pack-item .center {
    padding-left: 12px;
    padding-right: 16px;
    width: calc(100% - 138px);
}
.function-pack .item-application .pack-center .pack-item .center .name {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    padding-bottom: 6px;
}
.function-pack .item-application .pack-center .pack-item p {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    font-family: 'PingFang SC';
}
.function-pack .item-application .pack-center .pack-item .center .name .try {
    color: #ffa114;
    font-size: 12px;
    font-weight: 400;
    font-family: 'PingFang SC';
    text-align: center;
    line-height: 16px;
    padding: 0 4px;
    height: 16px;
    border-radius: 2px;
    opacity: 1;
    background: #ffebcc;
    margin-left: 8px;
}
.function-pack .item-application .pack-center .pack-item .center .desc {
    font-size: 12px;
    color: #999999;
}
.function-pack .item-application .pack-center .pack-item .imitation-button {
    text-align: center;
    line-height: 24px;
    width: 65px;
    height: 24px;
    margin-right: 10px;
    border-radius: 31px;
    background: #f0f0f0;
    color: #666666;
    font-weight: 400;
}
.function-pack .item-application .pack-center .pack-item:hover {
    background-color: #f5f5f5;
}
.function-pack .item-application .pack-center .pack-item:hover .imitation-button {
    background: #e6f0ff;
    font-weight: 400;
    color: #1472ff;
}
</style>